<template>
    <div class="chaifen-wrap">
        <div class="header">
            <flexbox>
                <img src="@/assets/images/beijixing/beijixing-icon.png" style="width: 24px" />
                <span class="margin-l-8 font-w-b">指标阶段拆分</span>
            </flexbox>
            <div style="color: #70798b" class="margin-t-8"
                >在各项数据录入规范、指标可靠性较高的情况下，进行阶段拆分解读，可反映当前研发各阶段周期数据</div
            >
        </div>

        <div class="cont">
            <flexbox class="cont-time-process">
                <flexbox direction="column" align="flex-start" justify="space-between" style="height: 170px">
                    <div class="margin-t-8">
                        <div>业务活动节点</div>
                        <div class="margin-t-8">时间跟踪节点</div>
                    </div>
                    <div>
                        <flexbox justify="center" style="width: 103px; height: 28px">阶段</flexbox>
                        <div style="height: 40px; padding-top: 8px">平均耗时：天</div>
                    </div>
                </flexbox>

                <!-- 需求提出 -->
                <flexbox direction="column" align="flex-start" justify="space-between" class="tichu-item">
                    <flexbox align="flex-start">
                        <flexbox direction="column" style="margin-left: -4px">
                            <div style="width: 10px; height: 10px; border-radius: 50%; border: 2px solid #dedede"></div>
                            <div style="width: 1px; height: 92px; border: 1px dotted #dedede"></div>
                        </flexbox>
                        <div :class="['margin-t-8', detail.acceptAvgDays ? '' : 'nodata-color']">
                            <div>需求提出</div>
                            <div class="margin-t-8">需求创建时间</div>
                        </div>
                    </flexbox>
                    <div style="width: 100%">
                        <div v-if="detail.acceptAvgDays">
                            <div style="width: 100%; height: 28px; background: #dddddd"></div>
                            <div class="label-item">
                                <span class="text">{{ detail.acceptAvgDays }}</span>
                                <span>平均等待时长</span>
                            </div>
                        </div>
                        <a-popover trigger="hover" placement="bottom" v-else>
                            <template #content>
                                <flexbox>
                                    <ExclamationCircleFilled style="color: #faad14" />
                                    <span class="margin-l-8">数据缺失</span>
                                </flexbox>
                            </template>
                            <div class="nodata-item-bg" style="width: 100%; height: 28px; background-color: rgba(128, 128, 128, 0.55)"></div>
                        </a-popover>
                        <div style="height: 40px; padding-top: 8px"></div>
                    </div>
                </flexbox>

                <!-- 需求初审 -->
                <flexbox
                    direction="column"
                    align="flex-start"
                    justify="space-between"
                    class="chushen-item"
                    v-if="$route.query.isRequireAnalyse !== '否'"
                >
                    <flexbox align="flex-start">
                        <flexbox direction="column" style="margin-left: -4px">
                            <div style="width: 10px; height: 10px; border-radius: 50%; border: 2px solid #dedede"></div>
                            <div style="width: 1px; height: 92px; border: 1px dotted #dedede"></div>
                        </flexbox>
                        <div :class="['margin-t-8', detail.analyseAvgDays ? '' : 'nodata-color']">
                            <div>系统性需求初审</div>
                            <div class="margin-t-8">需求初审时间</div>
                        </div>
                    </flexbox>
                    <div style="width: 100%">
                        <div v-if="detail.analyseAvgDays">
                            <div style="width: 100%; height: 28px; background: #f1b5e6"></div>
                            <div class="label-item">
                                <span class="text">{{ detail.analyseAvgDays }}</span>
                                <span>平均分析时长</span>
                            </div>
                        </div>
                        <a-popover trigger="hover" placement="bottom" v-else>
                            <template #content>
                                <flexbox>
                                    <ExclamationCircleFilled style="color: #faad14" />
                                    <span class="margin-l-8">数据缺失</span>
                                </flexbox>
                            </template>
                            <div class="nodata-item-bg" style="width: 100%; height: 28px; background-color: #f1b5e6"></div>
                        </a-popover>
                        <div style="height: 40px; padding-top: 8px"></div>
                    </div>
                </flexbox>

                <!-- 需求受理 -->
                <flexbox direction="column" align="flex-start" justify="space-between" class="shouli-item">
                    <flexbox align="flex-start">
                        <flexbox direction="column" style="margin-left: -4px">
                            <div style="width: 10px; height: 10px; border-radius: 50%; border: 2px solid #dedede"></div>
                            <div style="width: 1px; height: 92px; border: 1px dotted #dedede"></div>
                        </flexbox>
                        <div :class="['margin-t-8', detail.convertAvgDays ? '' : 'nodata-color']">
                            <div>需求受理</div>
                            <div class="margin-t-8">需求受理时间</div>
                        </div>
                    </flexbox>
                    <div style="width: 100%">
                        <div v-if="detail.convertAvgDays">
                            <div style="width: 100%; height: 28px; background: #f9c350"></div>
                            <div class="label-item">
                                <span class="text">{{ detail.convertAvgDays }}</span>
                                <span>平均准备时长</span>
                            </div>
                        </div>
                        <a-popover trigger="hover" placement="bottom" v-else>
                            <template #content>
                                <flexbox>
                                    <ExclamationCircleFilled style="color: #faad14" />
                                    <span class="margin-l-8">数据缺失</span>
                                </flexbox>
                            </template>
                            <div class="nodata-item-bg" style="width: 100%; height: 28px; background-color: #faad14"></div>
                        </a-popover>
                        <div style="height: 40px; padding-top: 8px"></div>
                    </div>
                </flexbox>

                <!-- 需求评审 -->
                <flexbox direction="column" align="flex-start" justify="space-between" class="pingshen-item">
                    <flexbox align="flex-start">
                        <flexbox direction="column" style="margin-left: -4px">
                            <div style="width: 10px; height: 10px; border-radius: 50%; border: 2px solid #dedede"></div>
                            <div style="width: 1px; height: 92px; border: 1px dotted #dedede"></div>
                        </flexbox>
                        <div :class="['margin-t-8', detail.devAvgDays ? '' : 'nodata-color']">
                            <div>需求评审</div>
                            <div class="margin-t-8">方案确定时间</div>
                        </div>
                    </flexbox>
                    <div style="width: 100%">
                        <flexbox align="flex-start">
                            <div style="width: 100px" v-if="detail.devWaitAvgDays">
                                <div style="width: 100px; height: 28px; background: rgba(128, 128, 128, 0.55)"></div>
                                <div class="label-item">
                                    <span class="text">{{ detail.devWaitAvgDays }}</span>
                                    <span>等待研发时长</span>
                                </div>
                            </div>
                            <a-popover trigger="hover" placement="bottom" v-else>
                                <template #content>
                                    <flexbox>
                                        <ExclamationCircleFilled style="color: #faad14" />
                                        <span class="margin-l-8">等待研发时长数据缺失</span>
                                    </flexbox>
                                </template>
                                <div class="nodata-item-bg" style="width: 100px; height: 28px; background-color: rgba(128, 128, 128, 0.55)"></div>
                            </a-popover>

                            <div v-if="detail.devAvgDays" style="width: calc(100% - 100px)">
                                <div style="height: 28px; background: #697de8; margin-left: 4px"></div>
                                <div class="label-item">
                                    <span class="text">{{ detail.devAvgDays }}</span>
                                    <span>平均研发时长</span>
                                </div>
                            </div>
                            <a-popover trigger="hover" placement="bottom" v-else>
                                <template #content>
                                    <flexbox>
                                        <ExclamationCircleFilled style="color: #faad14" />
                                        <span class="margin-l-8">数据缺失</span>
                                    </flexbox>
                                </template>
                                <div class="nodata-item-bg" style="width: 100%; height: 28px; background-color: #697de8; margin-left: 4px"></div>
                            </a-popover>
                        </flexbox>
                        <div style="height: 40px; padding-top: 8px"></div>
                    </div>
                </flexbox>

                <!-- 研发 -->
                <flexbox direction="column" align="flex-start" justify="space-between" class="test-item">
                    <flexbox align="flex-start">
                        <flexbox direction="column" style="margin-left: -4px">
                            <div style="width: 10px; height: 10px; border-radius: 50%; border: 2px solid #dedede"></div>
                            <div style="width: 1px; height: 92px; border: 1px dotted #dedede"></div>
                        </flexbox>
                        <div :class="['margin-t-8', detail.devAvgDays ? '' : 'nodata-color']">
                            <div>研发结束</div>
                            <div class="margin-t-8">研发结束时间</div>
                        </div>
                    </flexbox>
                    <div style="width: 100%">
                        <flexbox align="flex-start">
                            <div style="width: 100px" v-if="detail.testWaitAvgDays">
                                <div style="width: 100px; height: 28px; background: rgba(128, 128, 128, 0.55)"></div>
                                <div class="label-item">
                                    <span class="text">{{ detail.testWaitAvgDays }}</span>
                                    <span>平均等待测试时长</span>
                                </div>
                            </div>
                            <a-popover trigger="hover" placement="bottom" v-else>
                                <template #content>
                                    <flexbox>
                                        <ExclamationCircleFilled style="color: #faad14" />
                                        <span class="margin-l-8">平均测试数据缺失</span>
                                    </flexbox>
                                </template>
                                <div class="nodata-item-bg" style="width: 100px; height: 28px; background-color: rgba(128, 128, 128, 0.55)"></div>
                            </a-popover>
                            <div v-if="detail.testAvgDays" style="width: calc(100% - 100px)">
                                <div style="height: 28px; background: #618ffd; margin-left: 4px"></div>
                                <div class="label-item">
                                    <span class="text">{{ detail.testAvgDays }}</span>
                                    <span>平均测试时长</span>
                                </div>
                            </div>
                            <a-popover trigger="hover" placement="bottom" v-else>
                                <template #content>
                                    <flexbox>
                                        <ExclamationCircleFilled style="color: #faad14" />
                                        <span class="margin-l-8">平均测试数据缺失</span>
                                    </flexbox>
                                </template>
                                <div class="nodata-item-bg" style="width: 100%; height: 28px; background-color: #618ffd; margin-left: 4px"></div>
                            </a-popover>
                        </flexbox>

                        <div style="height: 40px; padding-top: 8px"></div>
                    </div>
                </flexbox>

                <!-- 上线 -->
                <flexbox direction="column" align="flex-start" justify="space-between" class="online-item">
                    <flexbox align="flex-start">
                        <flexbox direction="column" style="margin-left: -4px">
                            <div style="width: 10px; height: 10px; border-radius: 50%; border: 2px solid #dedede"></div>
                            <div style="width: 1px; height: 92px; border: 1px dotted #dedede"></div>
                        </flexbox>
                        <div :class="['margin-t-8', detail.onlineTestEndAvgDays ? '' : 'nodata-color']">
                            <div>测试结束</div>
                            <div class="margin-t-8">测试结束时间</div>
                        </div>
                    </flexbox>
                    <div style="width: 100%">
                        <div v-if="detail.onlineTestEndAvgDays">
                            <div style="width: 100%; height: 28px; background: #00bf8f"></div>
                            <div class="label-item">
                                <span class="text">{{ detail.onlineTestEndAvgDays }}</span>
                                <span>平均上线时长</span>
                            </div>
                        </div>
                        <a-popover trigger="hover" placement="bottom" v-else>
                            <template #content>
                                <flexbox>
                                    <ExclamationCircleFilled style="color: #faad14" />
                                    <span class="margin-l-8">平均上线时长数据缺失</span>
                                </flexbox>
                            </template>
                            <div class="nodata-item-bg" style="width: 100%; height: 28px; background-color: #00bf8f"></div>
                        </a-popover>
                        <div style="height: 40px; padding-top: 8px"></div>
                    </div>
                </flexbox>

                <flexbox direction="column" align="flex-start" justify="space-between" style="height: 170px">
                    <flexbox align="flex-start">
                        <flexbox direction="column" style="margin-left: -10px">
                            <div style="width: 10px; height: 10px; border-radius: 50%; border: 2px solid #dedede"></div>
                            <div style="width: 1px; height: 92px; border: 1px dotted #dedede"></div>
                        </flexbox>
                        <div class="margin-t-8">
                            <div>需求上线</div>
                            <div class="margin-t-8">需求上线时间</div>
                        </div>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>
    </div>
</template>

<script lang="ts">
import { useRoute } from 'vue-router';
import { ExclamationCircleFilled } from '@ant-design/icons-vue';
import { defineComponent, nextTick, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    components: {
        ExclamationCircleFilled
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const route = useRoute();
        const state = reactive<any>({});
        const setItemWidth = (val, total, selector: string, key = '') => {
            const dom = document.querySelector(selector);
            if (!dom) {
                console.warn(`Element with selector "${selector}" not found.`);
                return;
            }

            if (!total) {
                (dom as HTMLElement).style.width = key === 'pingshen-item' || key === 'test-item' ? '220px' : '120px';
                return;
            }

            const rate = val ? Number((val / total).toFixed(2)) : 0;
            let width = '120px';

            if (key === 'pingshen-item' || key === 'test-item') {
                const waitRate =
                    key === 'pingshen-item'
                        ? Number((props.detail.devWaitAvgDays / total).toFixed(2))
                        : Number((props.detail.testWaitAvgDays / total).toFixed(2));

                width = `calc(${Math.ceil((rate + waitRate) * 0.4 * 100)}% + 220px)`;
            } else if (val) {
                width = `calc(${Math.ceil(rate * 0.4 * 100)}% + 120px)`;
            }

            (dom as HTMLElement).style.width = width;
        };
        const initWidth = () => {
            const { acceptAvgDays, analyseAvgDays, convertAvgDays, devAvgDays, testAvgDays, onlineTestEndAvgDays, devWaitAvgDays, testWaitAvgDays } =
                props.detail;
            const total =
                (acceptAvgDays || 0) +
                (analyseAvgDays || 0) +
                (convertAvgDays || 0) +
                (devAvgDays || 0) +
                (testAvgDays || 0) +
                (onlineTestEndAvgDays || 0) +
                (devWaitAvgDays || 0) +
                (testWaitAvgDays || 0);

            nextTick(() => {
                setItemWidth(acceptAvgDays, total, '.tichu-item');
                if (route.query.isRequireAnalyse !== '否') {
                    setItemWidth(analyseAvgDays, total, '.chushen-item');
                }
                setItemWidth(convertAvgDays, total, '.shouli-item');
                setItemWidth(devAvgDays, total, '.pingshen-item', 'pingshen-item');
                setItemWidth(testAvgDays, total, '.test-item', 'test-item');
                setItemWidth(onlineTestEndAvgDays, total, '.online-item');
            });
        };
        watch(
            () => props.detail,
            () => {
                initWidth();
            },
            {
                deep: true,
                immediate: true
            }
        );
        return {
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="less">
.chaifen-wrap {
    .header {
        padding: 16px;
    }
    .cont {
        &-time-process {
            padding: 16px;
            width: 100%;
            .nodata-item-bg {
                background: url('~@/assets/images/beijixing/line.png');
            }
            .tichu-item,
            .chushen-item,
            .shouli-item,
            .pingshen-item,
            .yanfa-item,
            .test-item,
            .online-item {
                width: 120px;
                height: 170px;
                margin-right: 4px;
                .label-item {
                    .text {
                        width: 26px;
                        height: 16px;
                        background: #0478d3;
                        color: #fff;
                        border-radius: 8px;
                        padding: 0 6px;
                        margin-left: 4px;
                        margin-right: 2px;
                    }
                    height: 22px;
                    margin-top: 8px;
                    line-height: 22px;
                    background: #f0f2f5;
                    border-radius: 13px;
                    border: 1px solid #d9d9d9;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            .nodata-color {
                color: #b3b6bb;
            }
        }
    }
}
</style>
